<template>
	<div class="wrap shopDetails">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="bannerDetail wrapbd">
			<swipe :autoplay="3000">
				<swipe-item v-for="(item,index) in productDetail.gallery_img" :key="index"><img :src="item.url"></swipe-item>
			</swipe>
		</div>
		<div class="detaprice">
			<p>{{productDetail.product_name}}</p>
			<div class="pricedetail">
				<span class="left"><label>￥{{productDetail.unit_money}}</label></span>
 				<span class="right"><i>剩余库存：{{productDetail.stock_num_total}}</i></span>
 			</div>
		</div>
    <div class="detaprice">
      <van-cell style="padding-left: 0;" :title="productDetail.spec_name_full" @click="showSku" is-link/>
    </div>
		<div class="imgIntrod padding20">
			<h1>图文介绍</h1>
			<div v-html="productDetail.content"></div>
		</div>
		<div class="buyshop">
      <van-icon class="cart" name="cart" @click="toCart"/>
			<input type="button" value="添加到购物车" :disabled="disableBtn"  @click="showSku">
			<input type="button" value="立即购买"  @click="isOrder">
		</div>
    <van-sku
      v-model="skuGroup.showBase"
      :sku="skuGroup.sku"
      :goods="skuGroup.goods"
      :goods-id="skuGroup.goodsId"
      :hide-stock="skuGroup.sku.hide_stock"
      :quota="skuGroup.quota"
      :quota-used="skuGroup.quotaUsed"
      :reset-stepper-on-hide="skuGroup.resetStepperOnHide"
      :reset-selected-sku-on-hide="skuGroup.resetSelectedSkuOnHide"
      :close-on-click-overlay="skuGroup.closeOnClickOverlay"
      :disable-stepper-input="skuGroup.disableStepperInput"
      :stepper-title="skuGroup.stepperTitle"
      :buyText="skuGroup.buyText"
      :show-add-cart-btn="skuGroup.showAddCartBtn"
      @buy-clicked="onBuyClicked"
    />
	</div>
</template>

<script>
	import HeadTitle from "./../../components/title.vue";
	import { Swipe, SwipeItem, Sku, Cell, CellGroup, Icon } from 'vant';
	export default {
		data(){
			return {
				headText: '商品详情',  //顶部标题
				productDetail:{},
				gallery_img:[],
				disableBtn:false,  //防止重复提交
        skuGroup: {
          showBase: false,
          sku: {},
          goods: {
            // 商品标题
            title: '测试商品1112',
            // 默认商品 sku 缩略图
            picture: 'https://img.yzcdn.cn/2.jpg'
          },
          goodsId: '14',
          quota: 5,
          quotaUsed: 1,
          resetStepperOnHide: false,
          resetSelectedSkuOnHide: false,
          disableStepperInput: false,
          closeOnClickOverlay: true
        }
			}
		},
		mounted(){
            this.initialize();  //获取商品详情
		},
		methods:{
			//左上角返回键
			onClickLeft () { this.$router.go(-1);},
      // onClickLeft () {this.$router.push('/record')},
			//获取商品详情
			initialize(){
				var _this = this;
				this.Tools.AXIOS({
            url: 'product/detail',
					transformRequest:{
            spec_id: this.$route.query.spec_id
					},
          success: function (res) {
						let result = res.data.data
						_this.productDetail = result.detail;
            _this.skuGroup = result.skuGroup;
						_this.gallery_img = result.gallery_img
          }
        })
			},
      toCart() {
        this.$router.push('/shoppingcart');
      },
      showSku() {
			  this.skuGroup.showBase = true;
      },
      onBuyClicked(data) {
        var _this = this;
        this.Tools.AXIOS({
          url: 'cart/edit',
          transformRequest:{
            spec_id: data.selectedSkuComb.id,
            selected_num: data.selectedNum,
            page: 'product_detail',
          },
          success: function (res) {
            let result = res.data.data;
            _this.productDetail.product_name = result.product_name_full;
            _this.productDetail.spec_name_full = result.spec_name_full;
            _this.productDetail.unit_money = result.unit_money;
            _this.productDetail.spec_id = result.spec_id;
            _this.skuGroup.showBase = false;
            _this.$toast.success('添加成功');
          },error: function(res){
            _this.$toast.success(res.data.msg);
          }
        })
      },
			//下单
			isOrder:function(){
				let _this = this, prouctdArr = [];
				if(this.productDetail.stock_num < 1){
					this.$toast({message: '库存不足', position: 'bottom',duration: 1500})
				}else{
          this.$router.push({path:'confirmOrder',query:{spec_id:this.productDetail.spec_id}});
					// prouctdArr.push({buy_num:1,product_id:this.productDetail.product_id})
					// this.Tools.AXIOS({
					// 	url: 'order/add',
					// 	transformRequest: {
					// 		product_list : JSON.stringify(prouctdArr),    //商品列表
					// 		tips: 1,
					// 	},
					// 	success: function (res) {
					// 		window.sessionStorage.setItem('product_id',JSON.stringify(prouctdArr));
					// 		_this.$router.push({path:'confirmOrder'});
					// 	},error(){}
					// })
				}
			}
		},
		components: {
			HeadTitle,
			Swipe,
      SwipeItem,
      [Sku.name]: Sku,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Icon.name]: Icon
		},
	}
</script>
<style scoped>
.shopDetails .istitle .mint-header{ background: #fff!important; color: #030303!important; box-shadow: 0 0 5px #EDEDED;}
.shopDetails .istitle .mint-header .mintui-back{ color: #030303!important; }
 .shopDetails .bannerDetail{ height: 10rem;}
.shopDetails .bannerDetail img{ width: 100%; height: 10rem;}
.shopDetails .detaprice{ width: 95%; margin: 0 auto;}
.shopDetails .detaprice p{ font-size: .38rem; color: #323232; padding: .3rem 0;}
.shopDetails .detaprice .pricedetail{ overflow: hidden; padding-bottom: .3rem;}
.shopDetails .detaprice .pricedetail span label{ font-size: .45rem; color: #B08332;}
.shopDetails .detaprice .pricedetail span i{ font-style: normal; color: #BEBEBE; font-size: .34rem; text-decoration: line-through;}
.shopDetails .detaprice .pricedetail span:nth-child(2) i{ color: #666;  text-decoration: none!important; float: right;}
.shopDetails .imgIntrod{ width: 100%; border-top: 15px solid #F1F1F1;}
.shopDetails .imgIntrod h1{ text-align: center; color: 000; font-size: .45rem; padding: .3rem 0;}
.shopDetails .imgIntrod img{ width: 100%; border: 0; display: block;}
.shopDetails .buyshop{ width: 100%; height: 1.2rem; display: flex; box-sizing: border-box; line-height: 1.2rem; font-size: .4rem; text-align: center; position: fixed; bottom: 0; left: 0; background-color: #fff;}
.shopDetails .buyshop input{ width: 60%; border-radius: 0; background-color: #FD9709; color: #fff;}.shopDetails .buyshop input:nth-of-type(1){ border-right: 1px solid #fff;}
.shopDetails .cart{ width: 30%;font-size: .6rem;border-top: 1px solid #e8e8e8; padding-top: .3rem;}
.padding20 { padding-bottom: 1.5rem;}
</style>
